<template>
    <MenuPage 
        ref="menuPage"
        :columns="columns" 
        :data="data"
        :total="total"
        :page.sync="query.pageIndex"
        :size.sync="query.pageSize"
        :query="query"
        @add="showEditModal"
        @queryFun="queryList">
        <template slot="content">
            <p slot="top" v-if="gitInfo.userName" class="git-wrap">
                <span
                    >访问地址：<a :href="gitInfo.gitServerUrl" target="_blank">{{
                        gitInfo.gitServerUrl
                    }}</a></span
                >
                <Divider type="vertical"></Divider>
                <span>用户名：{{ gitInfo.userName }}</span>
                <Divider type="vertical"></Divider>
                <span>密码：{{ gitInfo.password }}</span>
            </p>
        </template>
        <!-- 创建 / 修改 -->
        <EditModal ref="editModal" :title="pageBtnTxt" @ok="handleOk"></EditModal>
    </MenuPage>
</template>
<script>
import EditModal from './edit.vue';
import { mapGetters, mapState, mapMutations } from 'vuex';
import { queryGitProject, delGitProject, getGitInfo } from '../api/gitManage.js';
import { gitDownloadMixin } from './mixin';
import pageTitle from '@/mixin/pageTitle';
export default {
    name: 'ResearchList',
    props: {},
    components: { EditModal },
    mixins: [gitDownloadMixin,pageTitle],
    data() {
        return {
            gitInfo: {},
                loading: false,
                query: {
                    pageIndex: 1,
                    pageSize: 10,
                },
                // queryForm: [
                //     {
                //         id: 'add',
                //         type: 'button',
                //         icon: 'md-add',
                //         text: `创建${this.pageTitle}`,
                //         fn: this.showEditModal,
                //     },
                //     // {
                //     //     id: 'creator',
                //     //     type: 'checkbox',
                //     //     text: '由我创建',
                //     // },
                //     { id: 'name', type: 'input', placeholder: '请输入名称' },
                //     { id: 'id', type: 'input', placeholder: '请输入ID' },
                //     { id: 'fresh', type: 'button', icon: 'ios-refresh', fn: this.refreshList },
                // ],
                columns: [
                    {
                        title: '名称',
                        key: 'name',
                        placement: 'top-left',
                        width: 200,
                        tooltip: true,
                        queryForm:{
                            component:'Input'
                        }
                    },
                    {
                        title: 'ID',
                        key: 'id',
                        width: 100,
                        tooltip: true,
                        queryForm:{
                            component:'Input'
                        }
                    },
                    {
                        title: '分支数量',
                        key: 'branchNum',
                        placement: 'top-right',
                        render: (h, params) => {
                            return h(
                                'Tag',
                                {
                                    props: { color: 'blue' },
                                    style: {
                                        cursor: 'pointer!important',
                                    },
                                    nativeOn: {
                                        click: (e) => {
                                            this.$router.push({
                                                name: 'branch',
                                                query: {
                                                    id: params.row.id,
                                                    name: params.row.name,
                                                },
                                            });
                                        },
                                    },
                                },
                                params.row.branchNum
                            );
                        },
                    },
                    {
                        title: '修改记录',
                        key: 'mRecord',
                        placement: 'top-right',
                        render: (h, params) => {
                            return h(
                                'Tag',
                                {
                                    props: { color: 'blue' },
                                    style: {
                                        cursor: 'pointer!important',
                                    },
                                    nativeOn: {
                                        click: (e) => {
                                            this.$router.push({
                                                name: 'commit',
                                                query: {
                                                    id: params.row.id,
                                                    name: params.row.name,
                                                },
                                            });
                                        },
                                    },
                                },
                                '修改记录'
                            );
                        },
                    },
                    {
                        title: '标签信息',
                        key: 'tag',
                        placement: 'top-right',
                        render: (h, params) => {
                            return h(
                                'Tag',
                                {
                                    props: { color: 'blue' },
                                    style: {
                                        cursor: 'pointer!important',
                                    },
                                    nativeOn: {
                                        click: (e) => {
                                            this.$router.push({
                                                name: 'tag',
                                                query: {
                                                    id: params.row.id,
                                                    name: params.row.name,
                                                },
                                            });
                                        },
                                    },
                                },
                                '标签信息'
                            );
                        },
                    },
                    {
                        title: '创建者',
                        key: 'creatorName',
                        width: 200,
                        tooltip: true,
                        // queryForm:{
                        //     component:'Checkbox',
                        //     text: '由我创建',
                        //     key: 'creator'
                        // }
                    },
                    {
                        title: '操作',
                        placement: 'top-right',
                        width:120,
                        key:'action',
                        opList:[
                            {
                                txt:'下载',
                                disabled:(data) => this.USER_ID != data.creator,
                                fun:(data) => {
                                    this.gitDownload(data.id, {
                                        name: data.name,
                                    });
                                }
                            },
                            {
                                txt:'删除',
                                type:'delete',
                                tooltip:true,
                                disabled: (data) => this.USER_ID != data.creator,
                                title: '你确定要删除吗?',
                                fun:this.delItem
                            }
                        ]
                    }
                ],
                data: [],
                total: 0
        };
    },
    computed: {
        ...mapState('user', {
            'USER_ID':state => state.userId,
            'isRootDesigner':state => state.isRootDesigner
        }),
        title() {
            return this.pageTitle || '代码管理';
        },
    },
    watch: {
       
    },
    mounted() {
        this.getGitInfo();
        this.queryList();
    },
    methods: {
        queryList() {
            let query = { ...this.query };
            if (query.creator) {
                query.creator = this.userId;
            } else {
                delete query.creator;
            }
            queryGitProject(query)
                .then((res) => {
                    if (res.code == 1 && res.data) {
                        this.data = res.data.items;
                        this.total = res.data.total;
                    } else {
                        this.data = [];
                        this.total = 0;
                    }
                })
                .finally(() => {
                   
                });
        },
        refresh() {
            this.query = { pageIndex: 1, pageSize: this.query.pageSize };
            this.queryList();
        },
        handleOk(type) {
            type === 'add' ? this.refresh() : this.queryList();
        },
        delItem(params) {
            delGitProject(params.id).then((res) => {
                if (res.code == 1) {
                    this.$Message.info('删除成功!');
                    if (
                        this.data.length == 1 &&
                        this.data.pageIndex > 1
                    ) {
                        this.data.pageIndex--;
                    }
                    this.queryList();
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        showEditModal(data) {
            this.$refs.editModal.showModal(data);
        },
        getGitInfo() {
            getGitInfo().then(({ code, data, message }) => {
                if (code == 1) {
                    this.gitInfo = data;
                }
            });
        },
    },
    beforeDestroy() {},
};
</script>

<style scoped>
.git-wrap {
    padding: 10px;
    margin-bottom: 10px;
    background: var(--table-tr-hover-color);
}
</style>
